<template>
  <div>
    <a-form ref="queryMenuFormRef" name="queryMenuForm" :model="queryMenuForm.data" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14 }">
      <a-row :gutter="24">
        <a-col span="8">
          <a-form-item name="menuName" label="菜单名称">
            <a-input v-model:value="queryMenuForm.data.menuName" allowClear></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" class="autoee-button-row">
        <a-col :span="12" style="text-align: left">
          <a-button type="primary" @click="openMenuAddModal()" v-hasPermi="['system:menu:add']"><AutoeeIcon icon="plus-outlined" />新增</a-button>
          <a-button type="primary" danger @click="clickDeleteMenu()" :disabled="menuTableData.selectedRowKeys.length <= 0" v-hasPermi="['system:menu:remove']"><AutoeeIcon icon="delete-outlined" />删除</a-button>
        </a-col>
        <a-col :span="12" style="text-align: right">
          <a-button type="primary" @click="menuTablePage.reload()"> <AutoeeIcon icon="SearchOutlined" />查询 </a-button>
          <a-button @click="resetMenuQueryForm()"><AutoeeIcon icon="redo-outlined" />重置</a-button>
        </a-col>
      </a-row>
    </a-form>

    <a-table
      rowKey="menuId"
      :columns="menuTableData.columns"
      :data-source="menuTableData.dataSource"
      :loading="menuTablePage.loading.value"
      :pagination="menuTablePagination"
      @change="menuTableHandChangePage"
      :row-selection="{ selectedRowKeys: menuTableData.selectedRowKeys, onChange: onMenuTableSelectChange }"
      bordered
      size="small"
      tableLayout="fixed"
    >
      <template #bodyCell="{ index, column, record }">
        <template v-if="column.key === 'pageIndex'">
          {{ index + 1 }}
        </template>
        <template v-else-if="column.key === 'visible'">
          <span>
            {{ AutoeeUtil.getDictLabelByKey(record.visible, pageData.sysShowHideDict) }}
          </span>
        </template>
        <template v-else-if="column.key === 'menuType'">
          <span>
            {{ AutoeeUtil.getDictLabelByKey(record.menuType, pageData.menuTypeDict) }}
          </span>
        </template>
        <template v-else-if="column.key === 'menuName'">
          <span> <AutoeeIcon :icon="record.icon" style="color: blue; padding-right: 10px" />{{ record.menuName }} </span>
        </template>
        <template v-else-if="column.key === 'status'">
          <span>
            {{ AutoeeUtil.getDictLabelByKey(record.status, pageData.sysNormalDisableDict) }}
          </span>
        </template>
        <template v-else-if="column.key === 'menuTableOperateCol'">
          <span>
            <a @click="openMenuDetailModal(record)"> 查看 </a>
            <a-divider type="vertical" v-hasPermi="['system:menu:edit']" />
            <a @click="openMenuUpdateModal(record)" v-hasPermi="['system:menu:edit']"> 修改 </a>
          </span>
        </template>
      </template>
    </a-table>

    <MenuAddUpdateModal
      ref="menuAddUpdateModalRef"
      :sysYesNoDict="pageData.sysYesNoDict"
      :sysShowHideDict="pageData.sysShowHideDict"
      :menuTypeDict="pageData.menuTypeDict"
      :sysNormalDisableDict="pageData.sysNormalDisableDict"
    />
    <MenuDetailModal
      ref="menuDetailModalRef"
      :sysYesNoDict="pageData.sysYesNoDict"
      :sysShowHideDict="pageData.sysShowHideDict"
      :menuTypeDict="pageData.menuTypeDict"
      :sysNormalDisableDict="pageData.sysNormalDisableDict"
    />
  </div>
</template>

<script setup name="Menu">
import { listMenu, getMenu, delMenu, addMenu, updateMenu } from '@/api/system/menu';
import MenuAddUpdateModal from './addUpdateModal.vue';
import MenuDetailModal from './detailModal.vue';
import { computed, reactive, ref } from 'vue';
import { AutoeeIcon } from '@/utils/AutoeeIcon.js';
import AutoeeUtil from '@/utils/AutoeeUtil.js';
import { message } from 'ant-design-vue';

// 当前页面使用的数据
const pageData = reactive({
  sysYesNoDict: [],
  sysShowHideDict: [],
  sysNormalDisableDict: [],
  menuTypeDict: [],
});

// AutoeeUtil.getDictsByType('sys_yes_no').then((res) => {
//   pageData.sysYesNoDict = res;
// });
pageData.sysYesNoDict = [
  { value: '0', label: '是' },
  { value: '1', label: '否' },
];
AutoeeUtil.getDictsByType('sys_show_hide').then((res) => {
  pageData.sysShowHideDict = res;
});
AutoeeUtil.getDictsByType('sys_normal_disable').then((res) => {
  pageData.sysNormalDisableDict = res;
});
pageData.menuTypeDict = [
  { value: 'M', label: '目录' },
  { value: 'C', label: '菜单' },
  { value: 'F', label: '按钮' },
];

// 查询Form
const queryMenuFormRef = ref();
const queryMenuForm = reactive({ data: { params: {} } });

// 重置查询Form
const resetMenuQueryForm = () => {
  AutoeeUtil.resetFormFieldsToEmpty(queryMenuForm.data);
  menuTablePage.reload();
};

// 打开新增窗口
const menuAddUpdateModalRef = ref();
const openMenuAddModal = () => {
  menuAddUpdateModalRef.value.openAddModal(menuTablePage);
};

// 打开修改窗口
const openMenuUpdateModal = (record) => {
  menuAddUpdateModalRef.value.openUpdateModal(record, menuTablePage);
};

// 打开详细窗口
const menuDetailModalRef = ref();
const openMenuDetailModal = (record) => {
  menuDetailModalRef.value.openModal(record);
};

// 点击删除
const clickDeleteMenu = () => {
  AutoeeUtil.confirmDeleteSelectedData(() => {
    delMenu(menuTableData.selectedRowKeys).then((res) => {
      menuTableData.selectedRowKeys = [];
      AutoeeUtil.messageSuccess('删除操作成功。');
      menuTablePage.reload();
    });
  });
};

// 列表数据
const menuTableData = reactive({
  // 列表数据
  dataSource: [],
  // 列表记录数
  total: 0,
  selectedRowKeys: [],
  // 列表列定义
  columns: [
    // {
    //   title: '序号',
    //   dataIndex: 'pageIndex',
    //   key: 'pageIndex',
    //   width: 50,
    //   align: 'center',
    // },
    // {
    //   title: '菜单ID',
    //   key: 'menuId',
    //   dataIndex: 'menuId',
    // },
    {
      title: '菜单名称',
      key: 'menuName',
      dataIndex: 'menuName',
    },
    {
      title: '路由地址',
      key: 'path',
      dataIndex: 'path',
    },
    {
      title: '权限标识',
      key: 'perms',
      dataIndex: 'perms',
    },
    {
      title: '菜单类型',
      key: 'menuType',
      dataIndex: 'menuType',
    },
    {
      title: '是否显示',
      key: 'visible',
      dataIndex: 'visible',
    },
    {
      title: '菜单状态',
      key: 'status',
      dataIndex: 'status',
    },
    // {
    //   title: '菜单图标',
    //   key: 'icon',
    //   dataIndex: 'icon',
    // },
    {
      title: '操作',
      key: 'menuTableOperateCol',
      width: 120,
    },
  ],
});

// 查询列表
const queryMenuList = () => {
  return listMenu(queryMenuForm.data);
};

// 用户列表翻页数据：使用vue-request中分页方法，返回参数包含{ run, reload, loading, current, pageSize }
const menuTablePage = AutoeeUtil.usePaginationByHandleTree(queryMenuList, menuTableData, 'menuId');

// 用户列表翻页工具条：必须通过计算函数每次重新生成
const menuTablePagination = computed(() => AutoeeUtil.getTablePagination(menuTablePage));

// 手动翻页方法
const menuTableHandChangePage = (page, filters, sorter) => {
  AutoeeUtil.tableHandChangePage(menuTablePage, page, filters, sorter);
};

// 列表选中方法
const onMenuTableSelectChange = (selectedRowKeys) => {
  menuTableData.selectedRowKeys = selectedRowKeys;
};
</script>
<style lang="less"></style>
